<template>
  <!-- 上侧菜单 -->
  <div class="topmenu">
    <div class="titletext">
      <div class="backbtn">
        <div class="backtext"
             @click="logOut">返回</div>
      </div>
      <div class="bigtitle">
        <slot></slot>
      </div>
      <div class="refreshbtn">
        <div class="refreshtext"
             @click="refreshPage">刷新</div>
      </div>
    </div>
    <div class="memberinfo">
      <div class="machinename">
        <div class="machine_ct">设备：<span>{{MachineName}}</span></div>
      </div>
      <div class="membername">
        <div class="member_ct">操作员工：<span>{{UserName}}</span></div>
      </div>
      <div class="nowtime">
        <div class="nowtime_ct">当前时间：<span>{{nowTime}}</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import updateTime from '@/utils/accesstime.js'

export default {
  name: 'topmenu',
  data() {
    return {
      time1: '',
      nowTime: ''
    }
  },
  mounted() {
    // 刷新时间
    updateTime.call(this)
  },
  methods: {
    // 退出登录按钮
    logOut() {
      this.$router.push('/home')
    },
    // 刷新页面
    refreshPage() {
      console.log('点击刷新')
      this.$emit('refreshPages')
    }
  },
  computed: {
    UserName() {
      if (!$cookies.get('totalInfo')) {
        // 名字无法刷新，退出登录
        this.$message({
          type: 'error',
          message: '登录失效，请重新登录'
        })
        this.$router.push('/login')
        return '无法显示'
      }
      return $cookies.get('totalInfo').UserInfo.UserName
    },
    MachineName() {
      if (!$cookies.get('totalInfo')) {
        // 名字无法刷新，退出登录
        this.$message({
          type: 'error',
          message: '登录失效，请重新登录'
        })
        this.$router.push('/login')
        return '无法显示'
      }
      return $cookies.get('totalInfo').selectedMacInfo.MachineName
    }
  }
}
</script>

<style lang="less" scoped>
.topmenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 15vh;
  background: #546293;
  min-width: 652px;
  min-height: 90px;

  .titletext {
    height: 60%;
    display: flex;
    .backbtn {
      position: relative;
      flex: 1;

      .backtext {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 50%;
        color: #546293;
        cursor: pointer;
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .bigtitle {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 40px;
    }
    .refreshbtn {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;

      .refreshtext {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 10px;
        width: 50px;
        height: 50px;
        background: #fff;
        color: #546293;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
  .memberinfo {
    height: 40%;
    display: flex;
    font-size: 20px;
    color: #fff;

    .machinename {
      flex: 1;
      background: #546293;
      display: flex;
      align-items: center;

      .machine_ct {
        margin: 0 auto;
      }
    }
    .membername {
      flex: 1;
      background: #546293;
      display: flex;
      align-items: center;

      .member_ct {
        margin: 0 auto;
      }
    }
    .nowtime {
      flex: 1;
      background: #546293;
      display: flex;
      align-items: center;

      .nowtime_ct {
        margin: 0 auto;
      }
    }
  }
}
</style>